<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="libs/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/base.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="libs/js/jquery.jqzoom.min.js" type="text/javascript" charset="utf-8"></script>
		
		
		<link rel="stylesheet" type="text/css" href="detaile.css"/>
		<style type="text/css">
		</style>
	</head>
	<body style="height: 1600px;">
		<div id="headPart">
			
		</div>
		<div id="container">
			<ul id="slidein">
				<li><img src="libs/img/shirt1.jpg"/></li>
				<li><img src="libs/img/shirt2.jpg"/></li>
				<li><img src="libs/img/shirt3.jpg"/></li>
				<li><img src="libs/img/shirt4.jpg"/></li>
				<li><img src="libs/img/shirt5.jpg"/></li>
			</ul>
			<div id="good_show" class="jqzoom">
				<img src="libs/img/shirt1.jpg" jqimg="libs/img/shirt1.jpg">
			</div>
			
			<div id="showDetaile">	
			</div>
			
			<div id="buy">
				<dl id="cloth_detaile">
					<dt>普拉多</dt>
					<dd>多色几何衬衫</dd>
					<dd>参考价$2000.00</dd>
					<dd>活动价￥<span>1450.09</span></dd>
					<dd>到货时间:预计3-5个工作日</dd>
					<dd>请选择尺码:</dd>
					<dd id="dd_btn"><button>38</button><button>39</button><button>40</button><button>41</button></dd>
					<dd><button id="quick">立即购买</button><button>加入购物袋</button></dd>
				</dl>
				<p id="share">分享至
					<a href="http://www.nike.com"><img src="libs/img/weibo.jpg"/></a>
					<a href="http://www.nike.com"><img src="libs/img/weixin.jpg"/></a>
					<a href="http://www.nike.com"><img src="libs/img/douban.jpg"/></a>
					<span>加入收藏(114)</span>
				</p>
			</div>
		</div>
		<div id="command">
			<p>相关推荐</p>
			<ul id="ul8">
				<li><img src="libs/img/com_1.jpg"/></li>
				<li><img src="libs/img/com_2.jpg"/></li>
				<li><img src="libs/img/com_3.jpg"/></li>
				<li><img src="libs/img/com_3.jpg"/></li>
				<li><img src="libs/img/com_5.jpg"/></li>
			</ul>
		</div>
		<div id="proInfo">
			 <ul id="ul9">
			 	<li>商品详情</li>
			 	<li>商品尺寸</li>
			 	<li>售后配送</li>
			 </ul>
			 <div id="de_produce">
				<dl id="dl1">
					<dt>1.退换货政策：</dt>
					<dd>美西秉承“轻松享受奢华”的服务理念，希望您所购买的商品都是最满意的。因此当您在收到商品觉得不满意时，我们会竭诚为您提供退换货服务。</dd>
					<dd>（1）商品发货后自签收之日起的七日内，若对商品质量有任何不满意，都可以联系我们要求退换货；由于个人原因不喜欢商品，退货运费由买家承担。一个订单，只提供一次退换货服务。</dd>
					<dd>（2）商品发货后自签收之日起的七日之后，我们将不再提供任何退换货服务。</dd>
					<dd>（3）请保证美西安全封绳的完好无损，退换的商品没有被使用过，并带有所有商品相关配件，包括说明书、身份证卡、防尘袋、包装盒等。</dd>
					<dd>（4）如果商品是一个系列中的一件，退换时需要包括整个系列。</dd>
					<dd>（5）特殊商品（见特别提示）非因质量问题不予退换货 。</dd>
					<dd>（6）参与活动的商品，非因质量问题不予退换货。</dd>
					<dd>（7）商品因人为使用不当导致得损坏及使用中造成的正常磨损：例如商品上的金属制品使用后出现氧化、褪色等情况不予退换货。</dd>
					<dd>（8）退款服务处理周期：正常退货退款处理周期为自接收到商品之日起5-7个工作日（国家法定假日除外）；</dd>
					<dd>若货到付款签收商品后，退货退款处理周期为自接收到商品之日起10-15个工作日。</dd>				
				</dl>
				<dl id="dl2">
					<dt>2.退换货政策：</dt>
					<dd>美西秉承“轻松享受奢华”的服务理念，希望您所购买的商品都是最满意的。因此当您在收到商品觉得不满意时，我们会竭诚为您提供退换货服务。</dd>
					<dd>（1）商品发货后自签收之日起的七日内，若对商品质量有任何不满意，都可以联系我们要求退换货；由于个人原因不喜欢商品，退货运费由买家承担。一个订单，只提供一次退换货服务。</dd>
					<dd>（2）商品发货后自签收之日起的七日之后，我们将不再提供任何退换货服务。</dd>
					<dd>（3）请保证美西安全封绳的完好无损，退换的商品没有被使用过，并带有所有商品相关配件，包括说明书、身份证卡、防尘袋、包装盒等。</dd>
					<dd>（4）如果商品是一个系列中的一件，退换时需要包括整个系列。</dd>
					<dd>（5）特殊商品（见特别提示）非因质量问题不予退换货 。</dd>
					<dd>（6）参与活动的商品，非因质量问题不予退换货。</dd>
					<dd>（7）商品因人为使用不当导致得损坏及使用中造成的正常磨损：例如商品上的金属制品使用后出现氧化、褪色等情况不予退换货。</dd>
					<dd>（8）退款服务处理周期：正常退货退款处理周期为自接收到商品之日起5-7个工作日（国家法定假日除外）；</dd>
					<dd>若货到付款签收商品后，退货退款处理周期为自接收到商品之日起10-15个工作日。</dd>				
				</dl>
				<dl id="dl3">
					<dt>3.退换货政策：</dt>
					<dd>美西秉承“轻松享受奢华”的服务理念，希望您所购买的商品都是最满意的。因此当您在收到商品觉得不满意时，我们会竭诚为您提供退换货服务。</dd>
					<dd>（1）商品发货后自签收之日起的七日内，若对商品质量有任何不满意，都可以联系我们要求退换货；由于个人原因不喜欢商品，退货运费由买家承担。一个订单，只提供一次退换货服务。</dd>
					<dd>（2）商品发货后自签收之日起的七日之后，我们将不再提供任何退换货服务。</dd>
					<dd>（3）请保证美西安全封绳的完好无损，退换的商品没有被使用过，并带有所有商品相关配件，包括说明书、身份证卡、防尘袋、包装盒等。</dd>
					<dd>（4）如果商品是一个系列中的一件，退换时需要包括整个系列。</dd>
					<dd>（5）特殊商品（见特别提示）非因质量问题不予退换货 。</dd>
					<dd>（6）参与活动的商品，非因质量问题不予退换货。</dd>
					<dd>（7）商品因人为使用不当导致得损坏及使用中造成的正常磨损：例如商品上的金属制品使用后出现氧化、褪色等情况不予退换货。</dd>
					<dd>（8）退款服务处理周期：正常退货退款处理周期为自接收到商品之日起5-7个工作日（国家法定假日除外）；</dd>
					<dd>若货到付款签收商品后，退货退款处理周期为自接收到商品之日起10-15个工作日。</dd>				
				</dl>
			</div>
		</div>
		<div id="guessYou">
			<h2>Guess You Like</h2>
			<ul id="ul10">
				<li><img src="libs/img/com_1.jpg"/></li>
				<li><img src="libs/img/com_2.jpg"/></li>
				<li><img src="libs/img/com_3.jpg"/></li>
				<li><img src="libs/img/com_3.jpg"/></li>
				<li><img src="libs/img/com_5.jpg"/></li>
			</ul>
		</div>
		<!--尾部-->
		<div id="footPart">	
		</div>
		<div id="back">
			<ul id="son_ba">
				<li><img src="libs/img/music.jpg"/></li>
				<li><img src="libs/img/tencen.jpg"/></li>
				<li><img src="libs/img/top.jpg"/></li>
			</ul>
		</div>
		<script type="text/javascript">
			$('#headPart').load('reHead.html?_='+Math.random());
			$('#footPart').load('footer1.html?_='+Math.random());
			//移动小图改变大图
			//放大镜，应用插件
			var index = 0;
			$('#slidein li').mouseover(function(){
				index = $(this).index();
				$('#good_show img').attr({"src":"libs/img/shirt"+($(this).index()+1)+".jpg","jqimg":"libs/img/shirt"+($(this).index()+1)+".jpg"});
				
			});
			
			$("#good_show").jqueryzoom({
			  xzoom: 300,//放大区域宽度
			  yzoom: 330,//放大区域高度
			  preload: 1,//是否显示预加载
			  offset:10,//放大区域偏离小图的距离
			  position: "right",//放大区域显示的位置（left,right）
			  lens:true //是否显示小图上的透明区域
		  	});
			
			
			//返回顶部
			$('#son_ba li').mouseover(function(){
				$(this).css('opacity',1);
				$(this).mouseout(function(){
					$(this).css('opacity',0.8);
				});
			});
			$('#son_ba:last').click(function(e){
				$(document).scrollTop(0);
			});
			//移动改变内容
			$('#ul9 li').mouseover(function(e){
				console.log($(this).index());
				$(this).css('background','#505050');
				$('#de_produce dl').eq($(this).index()).show().siblings().hide();
				$(this).mouseout(function(e){
					$(this).css('background','#E6E6E6');
				});
			});
			
			//把列表页的内容append到详情页的页面中来：动态页面
			//getCookie
			function changeNode(){
				var json = getCookie('shopInfo');
				json = JSON.parse(json);
				$('#good_show').html("<img src ='libs/img/" + json.img+ "'" + "jqimg='libs/img/" + json.img + "'/>");
				$('#cloth_detaile dt').text(json.name);
				var str = json.price;
				str.substr(1);
				$('#cloth_detaile span').eq(0).text(str.substr(1));
			}
			changeNode();
			
			//把购物信息存到cookie中去
			//选择尺码
			var size;
			$('#dd_btn button').click(function(){
				size = $(this).text();
				$(this).siblings().css('border','none');
				$(this).css('border','1px solid red');
				
			});
			//点击购买跳转到另外的页面去
			$("#quick").click(function(){
				window.location.href = "cart.html";
			});
			//加入购物车,也即是把信息存到cookie中去
			//点击最后一个按钮
			var arr = [];
			$('#buy button:last').click(function(){
				//把之前的放cookie信息拿出来
				var showInfo = getCookie('shopInfo');
				showInfo = JSON.parse(showInfo);
				var img = showInfo.img;
				var name = $('#buy dt').text() + $('#buy dd').eq(0).text();
				var price = $('#buy span').eq(0).text();
				var obj = {"name":name,"price":price,"size":size,"img":img};
				//
				var str = getCookie('value');
				if(str){
					str = JSON.parse(str);
					str.push(obj);
					arr=str;
					var json = JSON.stringify(arr);
					setCookie("value",json);
					var getinfo = JSON.parse(getCookie('value'));
					console.log(getinfo);
				}else{
					arr.push(obj);
					var json = JSON.stringify(arr);
					setCookie("value",json);
					var getinfo = JSON.parse(getCookie('value'));
					console.log(getinfo);
				}
			});
			
		</script>
	</body>
</html>
